<template>
    <div class="prop_form_box">
      <!-- 弹窗表单 -->
      <el-dialog class="dialog-form" :title="propOptions.title" :visible.sync="propOptions.isShow" :close-on-click-modal="false" :before-close="beforeClose">
        <el-form ref="formData" :model="formData" v-enterToNext>
          <el-row :gutter="0">
            <el-col v-show="!item.isHide" v-for="(item, index) in propformHeard" :span="item.colSpan" :key="index">
              <template v-if="item.type === 'input'">
                <el-form-item
                :label="item.label"
                :rules="[{ required: item.isRequired ? true : false,  message: ' ', trigger: 'blur' }]"
                :prop="item.key"
                :label-width="item.labelWidth">
                  <el-input
                  :type="item.inputType"
                  :placeholder="item.placeholder"
                  v-model="formData[item.key]"
                  :disabled="item.disabled">
                  </el-input>
                </el-form-item>
              </template>
              <template v-if="item.type === 'select'">
                <el-form-item
                :label="item.label"
                :rules="[{ required: item.isRequired ? true : false,  message: ' ', trigger: 'change' }]"
                :prop="item.key"
                :label-width="item.labelWidth">
                  <el-select
                    :ref="item.key"
                    @change="(v) => {changeSelect(v, item)}"
                    @keyup.native="keyUpEnter($event, item)"
                    @visible-change="setInputText($event, item.key)"
                    :default-first-option="false"
                    :disabled="item.disabled"
                    v-model="formData[item.key]"
                    placeholder=""
                    filterable
                    v-icon-hide>
                      <el-option v-for="(item, index) in item.option" :key="index" :value="item.id" :label=" item.code? `${item.code} - ${item.name}` : item.name"></el-option>
                    </el-select>
                </el-form-item>
              </template>
              <template v-if="item.type === 'radio'">
                <el-form-item
                :label="item.label"
                :rules="[{ required: item.isRequired ? true : false,  message: ' ', trigger: 'change' }]"
                :prop="item.key"
                :label-width="item.labelWidth">
                  <div class="textBox">
                    <el-radio-group v-model="formData[item.key]">
                      <el-radio v-for="(option, index) in item.option" :label="option.id" :key="index">{{option.name}}</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item>
              </template>
              <template v-if="item.type === 'text'">
                <el-form-item
                :label="item.label"
                :prop="item.key"
                :label-width="item.labelWidth">
                  <div class="textBox">{{formData[item.key]}}</div>
                </el-form-item>
              </template>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-for="(item, index) in propOptions.buttons" :key="index" type="primary" size="small" :loading="item.isBtnLoading" @click="submitForm(item.type)">{{item.name}}</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
import { getUserInfo } from '@/axios/user/user';
import md5 from 'js-md5';

export default {
  name: 'toptitle',
  data () {
    return {
      formData: {
      }
    }
  },
  components: {

  },
  created(){
  },
  computed:{
    ...mapState([])
  },
  watch: {
    'propOptions.isShow': {
      immediate: true,
      handler (v, o) {
        if (v) {
          this.init()
        }
      }
    }
  },
  props: {
    // 基础配置
    propOptions: {
        type: Object,
        default: () => { return {} }
    },
    /**
     * @method 表单内容配置
     * @param {string} colSpan 元素占比 24 一行
     * @param {string} type 类型 input select text
     * @param {string} isRequired 是否必填项
     * @param {string} disabled  是否禁用
     */
    propformHeard: {
      type: Array,
      default: () => { return [] }
    },
    // 按钮点击
    propSubmit: {
      type: Function,
      default: () => { return '' }
    },
    // 下拉选择
    propSelect: {
      type: Function,
      default: () => { return '' }
    }
  },
  methods:{
    ...mapMutations([]),
    /**
     * @method 初始化
     */
    async init(){
      if (this.propformHeard.length > 0) {
        this.propformHeard.forEach((item, index) => {
          this.$set(this.formData, item.key, item.value)
        })
      }
    },
    beforeClose() {
      this.propOptions.isShow = false
    },
    // 按钮事件
    submitForm(type) {
      if (type === 'save') {
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            this.propSubmit({
              type,
              data: this.formData
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        this.propSubmit({
          type,
          data: this.formData
        })
      }
    },
    // 下拉框选择
    changeSelect(v, item) {
      let self = this
      this.propSelect({
        value: v,
        key: item.key,
        item,
        done(key, value) {
          self.formData[key] = value
        }
      })
    },
    // 下拉输入
    keyUpEnter(event, item) {
      let self = this
      let keyCode = event.keyCode
      let val = $(event.target).val()
      if (keyCode !== 38 && keyCode !== 40){
        if (val == '') {
          self.$nextTick(() => {
            self.formData[item.key] = ''
          })
          return
        }
      }
    },
    setInputText(value, key) {
      if (value) {
        let self = this
        let el = this.$refs[key].$el ? $(this.$refs[key].$el) : $(this.$refs[key][0].$el);
        let inputEl = el.find('input')
        this.$nextTick(()=>{
          inputEl.val(inputEl.attr('placeholder'))
          inputEl.select();
        })
      }
    }
  }
};
</script>

<style lang="scss">
@import '../../../style/mixin';
@import "./index.scss";
</style>